<!DOCTYPE html>
<html lang="en">
<head>
    <title>填写订单信息</title>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/x-icon" href="/images/favicon/favicon.ico" />
    <link rel="stylesheet" href="/css/cart.css">
    <link rel="stylesheet" href="/css/footer1.css">
    <link rel="stylesheet" href="/css/shop.css">
    <link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/js/jq_3.3.1_mi.js"></script>
    <script src="/layui/layui.all.js"></script>
    <script src="/js/close.js"></script>
    <script src="/mylayer.js"></script>
</head>
<body>
<!-- 购物车头部 -->
<div class="header">
    <div class="content">
        <div class="content-left">
            <a href="" class="logo"></a>
            <h1 class="title">确认订单</h1>
        </div>
        <div class="content-right">
            <div class="userinfo">
                <div class="username">
                    <a href="javascript:void(0)" class="toUserInfo">我是李磊</a>
                    <ul>
                        <li class="infoitem">个人中心</li>
                        <li class="infoitem">评价晒单</li>
                        <li class="infoitem">我的喜欢</li>
                        <li class="infoitem">小米账户</li>
                        <li class="infoitem">退出登录</li>
                    </ul>
                </div>
                <i class="fa fa-angle-down fa-1x"></i>
            </div>
            <div class="toOrderDetail"><a href="./order.html">我的订单</a></div>
        </div>
    </div>
</div>
<!-- 主体内容 -->
<div class="close_content">
    <div class="close_contenter">
        <h1>收货地址</h1>
        <div id="shippingList">
            <!--<div class="close_add">
             <h1>xxx</h1>
             <h6>177****2345</h6>
             <h6>河北 xx市 xx区 xx街道</h6>
             <h6>xx栋 1405室</h6>
                <span class="del">删除</span>
            </div>-->
            <div class="close_add1">
                <i class="fa fa-plus-square"></i>
                <h6>添加新地址</h6>
            </div>
            <div class="clear"></div>
        </div>
        <h2>配送方式 <span style="color: #FF6A00;font-size: 13px;margin-left: 80px;">包邮</span></h2>
        <div class="close_data">
            <h3>付款方式</h3>
            <h5 id="0" style="border-color:rgb(255,106,0)">0:货到付款</h5>
            <h5 id="1">1：微信</h5>
            <h5 id="2">2：支付宝</h5>
            <h5 id="3">3：银联</h5>
        </div>
        <h2 style="border: none;margin-top:0px; ">发票<span style="color: #FF6A00;font-size: 13px;margin-left: 125px;">电子发票&nbsp;&nbsp;  个人  &nbsp;&nbsp;商品明细&nbsp;&nbsp;  修改 ></span></h2>
        <h4>商品及优惠券 <a href="./cart.html">返回购物车&nbsp; <i class="fa fa-chevron-right"></i> </a></h4>
        <div id="cartList" class="close_shop">
            <!--<p>
                <img src="./static/img/pms (2).jpg"><a href="./detail.html">红米6A 全网通版 2GB内存 16GB 流沙金  </a>599元 x 1
                <span >599元</span>
            </p>-->
            <div class="clear"></div>
        </div>
        <div class="close_much">
            <div class="close_much_left">
                <p><i class="fa fa-plus-square"></i>使用优惠券</p>
                <p><i class="fa fa-plus-square"></i>使用小米礼品卡</p>
            </div>
            <div class="close_much_right">
                <p>商品件数  :<span>3件</span></p>
                <p>商品总价  :<span>4999元</span></p>
                <p>优惠活动  :<span>-0元</span></p>
                <p>优惠券抵扣  :<span>-0元</span></p>
                <p>运费  :<span>0元</span></p>
                <p style="height: 50px;line-height:50px; ">应付总额  :<span class="zong">4999 <b> 元</b></span></p>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div class="close_clear">
        <button class="submit-cart">立即下单</button>
    </div>
</div>

<!--   网页底部   -->
<div class="footer-top">
    <div class="footer-top_li">
        <div class="footer-top_li_1">
            <a href="#"><i class="fa fa-wrench"></i>预约维修服务</a><span></span>
            <a href="#"><i class="fa fa-rotate-right "></i>7天无理由退货</a><span></span>
            <a href="#"><i class="fa fa-refresh"></i>15天免费换货</a><span></span>
            <a href="#"><i class="fa fa-gift"></i>满150元包邮</a><span></span>
            <a href="#"><i class="fa fa-map-marker"></i>520余家售后网点</a>
        </div>
        <span class="separate"></span>
        <div class="footer-top_li_2">
            <div class="footer-top_li_a">
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="">账户管理</a></dd>
                    <dd><a href="">购物指南</a></dd>
                    <dd><a href="">订单操作</a></dd>
                </dl>
                <dl>
                    <dt>服务支持</dt>
                    <dd><a href="">售后政策</a></dd>
                    <dd><a href="">自助服务</a></dd>
                    <dd><a href="">相关下载</a></dd>
                </dl>
                <dl>
                    <dt>线下门店</dt>
                    <dd><a href="">小米之家</a></dd>
                    <dd><a href="">服务网点</a></dd>
                    <dd><a href="">授权体验店</a></dd>
                </dl>
                <dl>
                    <dt>关于小米</dt>
                    <dd><a href="">了解小米</a></dd>
                    <dd><a href="">加入小米</a></dd>
                    <dd><a href="">投资者关系</a></dd>
                </dl>
                <dl>
                    <dt>关注我们</dt>
                    <dd><a href="">新浪微博</a></dd>
                    <dd><a href="">官网微博</a></dd>
                    <dd><a href="">联系我们</a></dd>
                </dl>
                <dl>
                    <dt>特色服务</dt>
                    <dd><a href="">F码通道</a></dd>
                    <dd><a href="">礼物码</a></dd>
                    <dd><a href="">防伪查询</a></dd>
                </dl>
                <div class="connect">
                    <p class="telephone">Feir-520-1314</p>
                    <p class="time">周一至周日 8:00-18:00<br>(仅收市话费)</p>
                    <button><span class="fa fa-commenting "></span> 联系客服</button>
                </div>
            </div>
            <div class="footer-top_li_b"></div>
        </div>
    </div>
</div>
<div class="footer-bottom">
    <div class="footer-bottom_li">
        <div class="footer-bottom_li_1">
            <img src="./static/img/footlogo.png" alt="" class="logoBottom">
        </div>
        <div class="footer-bottom_li_2">
            <div class="footer-bottom_li_a">
                <ul>
                    <li>小米商城<span></span></li>
                    <li>MIUI<span></span></li>
                    <li>米家<span></span></li>
                    <li>米聊<span></span></li>
                    <li>多看<span></span></li>
                    <li>游戏<span></span></li>
                    <li>路由器<span></span></li>
                    <li>米粉卡<span></span></li>
                    <li>政企服务<span></span></li>
                    <li>小米天猫店<span></span></li>
                    <li>隐私政策<span></span></li>
                    <li>问题反馈<span></span></li>
                    <li>Select Region</li>
                </ul>
            </div>
            <div class="footer-bottom_li_b">
                <a href="">©mi.com</a>
                京ICP证110507号
                <a href="">京ICP备10046444号</a>
                <a href="">京公网安备11010802020134号</a>
                <a href="">京网文[2014]0059-0009号</a>
                <br>
                违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
            </div>
        </div>
        <div class="footer-bottom_li_3">
            <img src="./static/img/footericon1.png" alt="" class="icon">
            <img src="./static/img/footericon2.png" alt="" class="icon">
            <img src="./static/img/footericon3.png" alt="" class="icon">
            <img src="./static/img/footericon4.png" alt="" class="icon">
            <img src="./static/img/footericon5.png" alt="" class="icon">
        </div>
        <div class="footer-bottom_li_4">
            探索黑科技，小米为发烧而生！
        </div>
    </div>
</div>
<script>
    layui.use('form', function(){
        var form = layui.form;
        form.render();

        $('.submit-cart').click(function () {
            $.post(
                '/order/add',
                {'shippingId': $('.close_add[checked="checked"]').attr('id'), 'paymentType': $('.close_data h5[checked="checked"]').attr('id')},
                function (result) {
                    console.log(result);
                    if (result.code == 0) {
                        mylayer.okUrl(result.msg, '/page/order/list');
                    } else {
                        mylayer.errorMsg(result.msg);
                    }
                },
                'json'
            );
        });


//selectShippingList 函数的作用是从服务器获取收货地址列表，并且把这些地址展示在页面上
        function selectShippingList() {
            $.post(
                '/shipping/list',
                function (result) {
                    console.log(result);
                    if (result.code == 0) {
                        $('#shippingList div.close_add').remove();//把原来的先移除掉
                        //$('#shippingList').empty();
                        $(result.data).each(function () {
                            var html = '';
                            html+='<div id="'+this.id+'" class="close_add">'
                            html+='    <h1>'+this.receiverName+'</h1>'
                            html+='    <h6>1'+this.receiverPhone+'</h6>'
                            html+='    <h6>'+this.receiverProvince+' '+this.receiverCity+'市 '+this.receiverDistrict+'区</h6>'
                            html+='    <h6>'+this.receiverAddress+'</h6>'
                            html+='    <span class="del">删除</span>'
                            html+='</div>'
                            $('#shippingList').prepend(html);
                        });
                    }
                },
                'json'
            );
        }
       selectShippingList();


        //window.selectShippingList = function () {
       /*function selectShippingList() {
            $.post(
                '/shipping/list',
                function (result) {
                    console.log(result);
                    if (result.code === 0) {
                        $('#shippingList div.close_add').remove(); // 移除原有的收货地址元素

                        $(result.data).each(function () {
                            let html = '';
                            html += '<div id="' + this.id + '" class="close_add">';
                            html += '    <h1>' + this.receiverName + '</h1>';
                            html += '    <h6>1' + this.receiverPhone + '</h6>';
                            html += '    <h6>' + this.receiverProvince + ' ' + this.receiverCity + '市 ' + this.receiverDistrict + '区</h6>';
                            html += '    <h6>' + this.receiverAddress + '</h6>';
                            html += '    <span class="del">删除</span>';
                            html += '</div>';
                            $('#shippingList').prepend(html);
                        });

                        // 为删除按钮绑定点击事件
                        $('.del').on('click', function () {
                            const shippingId = $(this).closest('.close_add').attr('id');
                            if (confirm('确定要删除该收货地址吗？')) {
                                $.post(
                                    '/deleteById',
                                    { id: shippingId },
                                    function (response) {
                                        if (response.code === 0) { // 假设 Result.ok 返回的 code 是 0
                                            $('#' + shippingId).remove();
                                            alert('收货地址删除成功');


                                        } else {
                                            alert('删除失败：' + response.message);
                                        }
                                    },
                                    'json'
                                );
                            }
                        });
                    }
                },
                'json'
            );
        }

        selectShippingList();*/





        $.post(
            '/cart/list',
            {'checked': 1},
            function (result) {
                console.log(result);
                if (result.code == 0) {
                    var totalCount = 0;
                    var totalPrice = 0;
                    $(result.data).each(function () {
                        var html = '';
                        html+='<p>'
                        html+='    <img width="30px" height="30px" src="'+this.productMainImage+'"><a href="/page/product/detail?id='+this.productId+'">'+this.productName+'</a>'+this.productPrice+'元 x '+this.quantity+''
                        html+='        <span >'+(this.productPrice*this.quantity)+'元</span>'
                        html+='</p>'
                        $('#cartList').append(html);
                    });

                }
            },
            'json'
        );

        //弹窗
        $('.close_add1').click(function(){
            layer.open({
                type: 1,
                area:['900px', '400px'],
                title: '填写新地址',
                content:
                    '   <form class="layui-form  layui-col-space10" action="">\n' +
                    '        <div class="layui-form-item  layui-col-space10">\n' +
                    '            <div class="layui-col-md6">\n' +
                    '                <input type="text" name="receiverName" required  lay-verify="required" placeholder="姓名" autocomplete="off" class="layui-input">\n' +
                    '            </div>\n' +
                    '            <div class="layui-col-md6">\n' +
                    '                <input type="text" name="receiverPhone" required lay-verify="required" placeholder="手机号" autocomplete="off" class="layui-input">\n' +
                    '            </div>\n' +
                    '        </div>\n' +
                    '        <div class="layui-form-item  layui-col-space10">\n' +
                    '            <div class="layui-col-md4" >\n' +
                    '                <select name="receiverProvince" id="provinceId" style="display: block;" lay-filter="city">' +
                    '                   <option value="">请选择你的省</option>' +
                    /*  '                   <option value="1">北京</option>   ' +
                      '                   <option value="2">上海</option>   ' +
                      '                   <option value="3">广州</option>   ' +
                      '                   <option value="4">深圳</option>   ' +
                      '                   <option value="5">安徽</option>   ' +*/
                    '                </select>' +
                    '            </div>\n' +
                    '            <div class="layui-col-md4" >\n' +
                    '                <select name="receiverCity" id="cityId" style="display: block;" lay-filter="city">' +
                    '                   <option value="">请选择你的城市</option>' +
                    /*  '                   <option value="1">合肥</option>   ' +
                      '                   <option value="2">北京</option>   ' +
                      '                   <option value="3">上海</option>   ' +
                      '                   <option value="4">深圳</option>   ' +*/
                    '                </select>' +
                    '            </div>\n' +
                    '            <div class="layui-col-md4" >\n' +
                    '                <select name="receiverDistrict" id="areaId" style="display: block;" lay-filter="city">' +
                    '                   <option value="">请选择你的区</option>' +
                    /*   '                   <option value="1">蜀山</option>   ' +
                       '                   <option value="2">肥东</option>   ' +
                       '                   <option value="3">肥西</option>   ' +
                       '                   <option value="4">政务区</option>   ' +*/
                    '                </select>' +
                    '            </div>\n' +
                    '        </div>\n' +
                    '        <div class="layui-col-md12">\n' +
                    '            <div class="layui-col-md12">\n' +
                    '                <textarea name="receiverAddress" placeholder="详细地址" class="layui-textarea"></textarea>\n' +
                    '            </div>\n' +
                    '        </div>\n' +
                    '        <div class="layui-form-item  layui-col-space10">\n' +
                    '            <div class="layui-col-md6">\n' +
                    '                <input type="text" name="receiverZip" required lay-verify="required" placeholder="邮政编码" autocomplete="off" class="layui-input">\n' +
                    '            </div>\n' +
                    '        </div>\n' +
                    '		<button type="button" lay-submit lay-filter="submitLogin">添加</button>\n' +
                    '    </form>',
                // 层弹出后的成功回调方法：layero前层DOM，index当前层索引
                success: function(layero, index){
                    $.post(
                        '/shipping/selectProvince',
                        function (result) {
                            console.log(result);
                            if (result.code == 0) {
                                //[{id: 320000, name: '江苏省'},{id: 330000, name: '浙江省'}]
                                $(result.data).each(function () {
                                    //this: {id: 320000, name: '江苏省'}
                                    //<option value="320000">江苏省</option>
                                    $('#provinceId').append('<option id="'+this.id+'" value="'+this.name+'">'+this.name+'</option>');
                                })
                            }
                        },
                        'json'
                    )

                    //给省份下拉框绑定change事件
                    $('#provinceId').change(function () {
                        //this  js dom
                        //{'provinceId': $(this).val()},
                        //$(this).val();
                        $.post(
                            '/shipping/selectCity',
                            {'provinceId': $('#provinceId option:selected').attr('id')},
                            function (result) {
                                console.log(result);
                                if (result.code == 0) {
                                    //清除掉原来的数据
                                    //$('#cityId option:gt(0)').remove();
                                    $('#cityId option:not(:first)').remove();
                                    $(result.data).each(function () {
                                        $('#cityId').append('<option id="'+this.id+'" value="'+this.name+'">'+this.name+'</option>');
                                    })
                                }

                            },
                            'json'
                        )
                    });

                    //给省份下拉框绑定change事件
                    $('#cityId').change(function () {
                        //this  js dom
                        $.post(
                            '/shipping/selectArea',
                            {'cityId': $('#cityId option:selected').attr('id')},
                            function (result) {
                                console.log(result);
                                if (result.code == 0) {
                                    //清除掉原来的数据
                                    //$('#cityId option:gt(0)').remove();
                                    $('#areaId option:not(:first)').remove();
                                    $(result.data).each(function () {
                                        $('#areaId').append('<option id="'+this.id+'" value="'+this.name+'">'+this.name+'</option>');
                                    })
                                }
                            },
                            'json'
                        )
                    });



                    //layui提交form表单事件
                    form.on('submit(submitLogin)', function (data) {
                        var field = data.field;
                        $.post(
                            '/shipping/add',
                            field, //{'name':'zhangsan','password':'123'}
                            function (result) {
                                if (result.code == 0) {
                                    mylayer.okMsg(result.msg);
                                    selectShippingList();
                                    layer.close(index);
                                } else {
                                    mylayer.errorMsg(result.msg);
                                }
                            }
                        );

                        return false; // 阻止默认 form 跳转
                    });


                },
            });
        })

    });



</script>
</body>
</html>